<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>分析数据代理</title>
    <script src="js/vue.js"></script>
</head>
<body>
<!--
    vue中的数据代理
        一.什么是数据代理
            1.配置对象data中的数据,会被收集到vm._data中,然后通过Object.defineProperty 让vm上拥有data中的所有属性
            2.当访问vm上的name时.修改_data当中的值
        二.为什么要数据代理?
            为了更方便的读取和修改_data中的数据,不做数据代理 就要_data.xxx访问数据
        三.扩展思考 为什么要先收集在_data中 然后再代理出去哪?
            更高效的监视数据(直接收集到vm上会导致监视效率低.不便于区分那些是内置的属性,那些是自己设置的属性)
-->
<div id="root">
    <h2>你的家乡:{{name}}</h2>
    <h2>具体地址:{{address}}</h2>
    <h2>你的班级:{{grade}}</h2>
</div>
<script type="text/javascript">
    Vue.config.productionTip=false//禁止提示生产提示
    const vm=new Vue({
        el:"#root",
        data(){
            return {
                name:"北京",
                address:"朝阳区大郊亭桥1号",
                grade:"2"
            }
        }
    })
    console.log(vm)
</script>
</body>
</html>




